<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1 {
				width: 958px;
				height: 45px;
				border: 1px solid #E0E0E0;
				border-left: 3px solid #F10180;
				background-color: #F9F9F9;
			}
			
			.dingbu li {
				font-size: 12px;
				/*margin: 0 75px;*/
			}
			
			.ziying {
				font-weight: bold;
				line-height: 10px;
				font-size: 16px;
				color: #F10180;
				margin: 0;
			}
			
			.div2 {
				width: 960px;
				border: 1px solid #E0E0E0;
				border-top: none;
				overflow: hidden;
			}
			
			.div2_div {
				width: 928px;
				/*border: 1px solid #E0E0E0;*/
				margin: 28px 16px;
			}
			
			.div2_div_div {
				width: 928px;
				height: 41px;
				background-color: #FFEFDD;
			}
			
			.feihua {
				font-size: 12px;
				line-height: 41px;
			}
			
			.sp {
				background-color: #FF9933;
				font-size: 14px;
				margin: 0 20px;
				text-align: center;
				border-radius: 3px;
				color: white;
			}
			
			#tab {
				width: 928px;
			}
			
			.mingcheng {
				width: 245px;
			}
			
			.dx {
				width: 58px;
				height: 74px;
				margin: 0 20px;
			}
			
			.tianjia {
				text-align: center;
			}
			
			.td1 {
				width: 400px;
			}
			
			.td2 {
				width: 100px;
				text-align: center;
			}
			
			.td3 {
				width: 140px;
				text-align: center;
			}
			
			.td5 {
				width: 132px;
				text-align: center;
				cursor: pointer;
			}
			
			input {
				text-align: center;
			}
			
			.ys {
				background-color: #F10180;
				line-height: 40px;
				color: white;
				border-radius: 5px;
			}
			.center{
				width: 962px;
				margin: 0 auto;
			}
			
			
			
			.div0 {
				width: 1000px;
				margin: 0 auto;
			}
			
			.div01 {
				height: 97px;
				margin-top: 40px;
			}
			
			.bg {
				background-image: url(image/sprite-hash-91639fdc.png);
			}
			
			.div01_01 {
				width: 313px;
				height: 53px;
				background-position: 0 0;
				float: left;
			}
			
			.div01_02 {
				width: 445px;
				height: 28px;
				margin-top: 12.5px;
				background-position: -317px 0;
				float: right;
			}
			
			
			
			.weibu {
				height: 477px;
				background-color: #F5F5F5;
			}
			
			.center-4 {
				width: 960px;
				margin: 0 auto;
			}
			.p_style {
				width: 960px;
				line-height: 30px;
				font-size: 12px;
				text-align: center;
			}
			.bgcolor {
				background-color: #F10180;
				color: white;
				margin: 20px 0;
			}
			.p_style a {
				color: white;
				padding: 10px;
			}
			
			.bgcolor a:hover {
				color: #B5B5B5;
			}
			
			.bgcolor2 {
				color: #4D4D4D;
			}
			
			.bgcolor2 a:hover {
				color: #F10180;
			}
			
			.bgcolor2 a {
				color: black;
			}
			.bk{
				cursor: pointer;
				border: none;
				outline: none;
				background-color: transparent;
			}
ul {
				list-style-type: none;
			}
			
			a {
				text-decoration: none;
			}
			
			p {
				font-size: 12px;
			}
			
			.fl {
				float: left;
				text-indent: -20px;
			}
			
			.fr {
				float: right;
				margin: 0 30px;
				/*border: 1px solid black;*/
			}
			
			.caozuo {
				margin: 0 70px;
			}
			
			.xiaoji {
				margin: 0 34px;
			}
			
			.shuliang {
				margin: 0 75px;
			}
			
			
			
		</style>
	</head>

	<body>
	
	<div class="center">
		    <div class="div1">
			<ul class="dingbu">
				<li class="fl"><span class="ziying">唯品自营</span></li>
				<li class="fr caozuo">操作</li>
				<li class="fr xiaoji">小计</li>
				<li class="fr shuliang">数量</li>
				<li class="fr">单价</li>
			</ul>
		</div>
		    <div class="div2">
			<div class="div2_div">
				<div class="div2_div_div">
					<p class="feihua"><span class="sp">&nbsp;满减 </span>已满足满4792元减400元 [已优惠¥400] , 再购542元可满足满5391元减450元，上不封顶
						<a href="">去凑单>></a>
					</p>
				</div>
				<table id="tab">
					<tbody></tbody>
					<tfoot>
						<tr>
							
						</tr>
						<tr>
							<td class="td1"></td>
							<td class="td2"></td>
							<td class="td3"></td>
							<td class="td4" id="heji">合计：0</td>
							<td class="td5 ys">
								<a href="" class="ys">立即结算</a>
							</td>
						</tr>
					</tfoot>
					
				</table>
				<td class="tianjia" colspan="5"><input type="button" name="" id="" value="添加" onclick="dianjitianjia()" /></td>
			</div>
		</div>
        </div>

				<script type="text/javascript">
				var sum = 0;

			function dianjitianjia() {
				var sum1 = parseInt(Math.random() * 1000 + 10);

				var tabl = document.getElementById("tab");
				var tr = document.createElement("tr");
				tabl.appendChild(tr);

				var td1 = document.createElement("td");
				var div_ziying = document.createElement("div")
				td1.appendChild(div_ziying);
				div_ziying.innerHTML = "<img src='img/img03_95x120.jpg' class='dx fl'/><p class='mingcheng'>sony正品 微单<p><p>尺码：全画幅</p>"
				td1.setAttribute("class", "td1")

				var td2 = document.createElement("td");
				td2.innerHTML = sum1;
				td2.setAttribute("class", "td2")
				console.log(td2.innerHTML);

				var td3 = document.createElement("td");
				td3.innerHTML = "<input type='button' value='-' onclick='jianshao(this)'/><input type='text' value='1' size='2'/><input type='button' value='+' onclick='zengjia(this)'/>"
				td3.setAttribute("class", "td3")

				var td4 = document.createElement("td");
				td4.innerHTML = td2.innerHTML;
				td4.setAttribute("class", "td2")

				var td5 = document.createElement("td");
				td5.innerHTML = "<input type='button' class='bk' value='删除' onclick='deltr(this)'/>";
				td5.setAttribute("class", "td5")
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				tr.appendChild(td4);
				tr.appendChild(td5);

				sum += sum1
				document.getElementById("heji").innerHTML = sum
			}

			//按x删除对应行
			function deltr(t) {
				t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
			}
			//减价
			function jianshao(x) {
				if(x.parentNode.children[1].value > 1) {
					x.parentNode.children[1].value--;
					var danjia = x.parentNode.parentNode.children[1].innerHTML;
					var shuliang = x.parentNode.children[1].value;
					x.parentNode.parentNode.children[3].innerHTML = danjia * shuliang;
					document.getElementById("heji").innerHTML = document.getElementById("heji").innerHTML - danjia;
				}

			}
			//加价
			function zengjia(y) {
				y.parentNode.children[1].value++;
				var zongjia = y.parentNode.parentNode.children[1].innerHTML;
				var shuliang = y.parentNode.children[1].value;
				y.parentNode.parentNode.children[3].innerHTML = zongjia * shuliang
				document.getElementById("heji").innerHTML = document.getElementById("heji").innerHTML * 1 + zongjia * 1;
			}

					/**
			 * 点击左上天津导航触发显示事件
			 */
			var n = 1;

			function fun1() {
				n++;
				if(n % 2 == 0) {
					document.getElementById("ShengFen").parentNode.children[0].children[2].style.display = "block ";
					document.getElementById("ShengFen").parentNode.children[0].style.backgroundColor = "white ";
					document.getElementById("ShengFen").parentNode.children[0].style.border = "1px solid #ccc ";
				} else {
					document.getElementById("ShengFen").parentNode.children[0].children[2].style.display = "none ";
					document.getElementById("ShengFen").parentNode.children[0].style.backgroundColor = "transparent ";
					document.getElementById("ShengFen").parentNode.children[0].style.border = "1px solid transparent ";

				}
			}

			function shengfen() {
				var ShengFen = document.getElementById("shengfen_ul").getElementsByTagName("li");
				for(var i = 0; i < ShengFen.length; i++) {
					ShengFen[i].onclick = function() {
						//为了将所有省份的样式改为初始状态
						for(var j = 0; j < ShengFen.length; j++) {
							ShengFen[j].style.backgroundColor = "white";
							ShengFen[j].children[0].style.color = "#000000";
						}
						//为了让点击的省份改变样式
						this.style.backgroundColor = "#F10180";
						this.children[0].style.color = "white";
						console.log(this.children[0].innerHTML);
						document.getElementById("BIAN").innerHTML = this.children[0].innerHTML;
					}
				}
			}
			shengfen();
            
            /**
             * 查看预热商品
             */
			function fun2() {
				n++;
				if(n % 2 == 0) {
					document.getElementById("fxk").style.backgroundPositionX = "-24px"
				} else {
					document.getElementById("fxk").style.backgroundPositionX = "-48px"
				}

			}
			

				</script>
	</body>

</html>